<template>
  <div class="event-host">
    <div class="title">Event Host</div>
    <img src="@/assets/pc/host.svg" alt="" class="host-img" />
  </div>
</template>

<style lang="scss" scoped>
.event-host {
  text-align: center;
  .title {
    color: #5cd848;
    font-size: 90px;
    line-height: 108px;
    font-family: poppins-bold;
  }
  .host-img {
    width: 100%;
    margin-top: 80px;
  }
  .sub-title {
    color: #5cd848;
    font-size: 40px;
    line-height: 48px;
    margin-top: 80px;
  }
  .host-img2 {
    width: 100%;
    margin-top: 38px;
  }
}
@media screen and (max-width: 1180px) {
  .event-host {
    margin-top: 50px;
    .title {
      font-size: 32px;
      line-height: 38px;
    }
    .host-img {
      width: 100%;
      margin-top: 27px;
    }
    .sub-title {
      color: #5cd848;
      font-size: 16px;
      line-height: 19px;
      margin-top: 30px;
    }
    .host-img2 {
      width: 100%;
      margin-top: 14px;
    }
  }
}
</style>
